<script setup lang="ts">
const props = defineProps({
    option: {
        type: Object,
        default: () => {
            return {
                name: '',
                color: '',
                title: '',
                router: '',
                bccolor: '',
            }
        },
    },
})
</script>

<template>
    <view class="item">
        <view class="item__left" :style="{ backgroundColor: props.option.bccolor }">
            <u-icon :name="props.option.name" custom-prefix="icon" class="iconfont" size="48" :color="props.option.color"></u-icon>
        </view>
        <view class="item__center">{{ props.option.title }}</view>
        <view class="item__right">
            <u-icon name="arrow-right" custom-prefix="uicon" size="28" color="#101010"></u-icon>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(item) {
    margin-bottom: 34rpx;
    background-color: rgba(255, 255, 255, 1);
    width: 660rpx;
    height: 140rpx;
    border-radius: 22rpx;
    box-shadow: 0 4rpx 22rpx 0 rgba(246, 246, 246, 100);
    margin-right: 54rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    @include e(left) {
        width: 94rpx;
        height: 94rpx;
        line-height: 94rpx;
        border-radius: 22rpx;
        background-color: rgba(225, 233, 253, 1);
        text-align: center;
        margin-left: 36rpx;
        flex-shrink: 0;
    }
    @include e(center) {
        margin-left: 30rpx;
        flex: 1;
    }
    @include e(right) {
        margin-left: auto;
        margin-right: 20rpx;
    }
}
</style>
